<template>
	<view class="mygird-content">
		<view class="mygrid-item" v-for="(item,index) in itemArr" @click="itemClick(item)" :key="index">
			<image :src="item.icon"></image>
			<text>{{item.text}}</text>
		</view>
		
	</view>
</template>

<script>
	export default {
		name:"mygrid",
		props:['itemArr'],
		data() {
			return {
				
			};
		},
		methods: {
			itemClick(item) {
				this.$emit("myGridClicked", item);
			}
		}
	}
</script>

<style lang="scss">
	.mygird-content {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-items: flex-end;
		
		padding-bottom: 30rpx;
		.mygrid-item {
			
			width: 25%;
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 10rpx 0;
			image {
				height: 60rpx;
				width: 60rpx; 
				
			}
			text {
				padding: 10rpx 0;
				font-size: 25rpx;
				color: #333333;
			}
		}
	}
</style>
